<template>
  <div v-loading="loading">
    <h3 class="title">云服务器可视化性能指标</h3>

<!--    <el-button type="primary" @click="testout">测试导出</el-button>-->
    <div class="block">
      <el-select v-model="value4" clearable placeholder="请选择服务器" v-show="false">
        <el-option
            v-for="item in serverOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker
          v-model="value2"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
         >
      </el-date-picker>
<!--      <el-select v-model="value3" clearable placeholder="请选择周期" style="margin-left: 10px">-->
<!--        <el-option-->
<!--            v-for="item in options"-->
<!--            :key="item.value"-->
<!--            :label="item.label"-->
<!--            :value="item.value">-->
<!--        </el-option>-->
<!--      </el-select>-->
      <el-input v-model="value3" placeholder="请输入1-60的间隔分钟整数" style="width: 200px;margin-left: 10px"></el-input>
      <el-button type="primary" style="margin-left: 10px" @click="dc" class="el-icon-search" v-if="six !== 1">查询</el-button>
<!--      <el-button type="primary" style="margin-left: 10px" class="el-icon-search" size="small" @click="tttt">ce</el-button>-->

      <!--      <el-button type="primary" style="margin-left: 10px" @click="dc" class="el-icon-search" v-else>查询</el-button>-->
      <el-button type="primary" style="margin-left: 10px;float: right" class="el-icon-download" @click="serverInfoExport">导出</el-button>
<!--      <el-button type="primary" @click="wi">获取</el-button>-->
<!--      <el-button type="primary" style="margin-left: 10px" @click="areaDestory">图清除</el-button>-->
    </div>

    <el-tabs v-model="activeName" style="margin-top: 10px;" @tab-click="cpuEvent">
      <el-tab-pane label="总览" name="first"></el-tab-pane>
      <el-tab-pane label="硬盘数据" name="second"></el-tab-pane>
      <el-tab-pane label="内存数据" name="third"></el-tab-pane>
      <el-tab-pane label="GPU1数据" name="fourth"></el-tab-pane>
      <el-tab-pane label="GPU2数据" name="seventh"></el-tab-pane>
      <el-tab-pane label="GPU3数据" name="eighth"></el-tab-pane>
      <el-tab-pane label="GPU4数据" name="ninth"></el-tab-pane>
      <el-tab-pane label="CPU整体数据" name="fifth"></el-tab-pane>
      <el-tab-pane label="CPU多核心数据" name="sixth" v-if="six === 2"></el-tab-pane>
      <el-tab-pane label="CPU多核心数据正在加载..." name="sixth" v-if="six === 1" disabled></el-tab-pane>
    </el-tabs>
<!--    <template v-show="activeName==='second'">-->
<!--    <div class="outer" v-show="activeName==='first'">-->
<!--      <div style="display: flex;justify-content: space-evenly;align-content: center;">-->
<!--      <div id="disk_container" style="height: 210px;">-->
<!--        <p style="text-align: center" v-show="area1">磁盘</p>-->
<!--      </div>-->
<!--      <div id="memory_container" style="height: 210px;float:left;width: 48%">-->
<!--        <p style="text-align: center" v-show="area2">内存</p>-->
<!--      </div>-->
<!--      </div>-->
<!--      <div style="display: flex;justify-content: space-evenly;align-content: center;margin-top: 20px;">-->
<!--        <div id="totalCpu_container" style="height: 210px;">-->
<!--          <p style="height: 40px;line-height: 40px;margin-bottom: 15px;text-align: center" v-show="area3">CPU</p>-->
<!--        </div>-->
<!--        <div id="gpu_container" style="height: 210px;margin-left: 10px;" v-show="area4">-->
<!--          <el-tabs v-model="activeGpu">-->
<!--            <el-tab-pane label="GPU1" name="first">-->
<!--              <div id="gpu1_container" style="height: 210px;"></div>-->
<!--            </el-tab-pane>-->
<!--            <el-tab-pane label="GPU2" name="second">-->
<!--              <div id="gpu2_container" style="height: 200px;width: 100%;"></div>-->
<!--            </el-tab-pane>-->
<!--            <el-tab-pane label="GPU3" name="third">-->
<!--              <div id="gpu3_container" style="height: 200px;width: 100%;"></div>-->
<!--            </el-tab-pane>-->
<!--            <el-tab-pane label="GPU4" name="fourth">-->
<!--              <div id="gpu4_container" style="height: 200px;width: 100%;"></div>-->
<!--            </el-tab-pane>-->
<!--          </el-tabs>-->
<!--        </div>-->
<!--      </div>-->
<!--&lt;!&ndash;      <div id="disk_container" style="height: 200px;width: 45%;float: left;">&ndash;&gt;-->
<!--&lt;!&ndash;        <p style="text-align: center" v-show="area1">磁盘</p>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--&lt;!&ndash;      <div id="memory_container" style="height: 200px;width: 45%;float: left;margin-left: 10px">&ndash;&gt;-->
<!--&lt;!&ndash;        <p style="text-align: center" v-show="area2">内存</p>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--&lt;!&ndash;      <div id="totalCpu_container" style="height: 200px;width: 45%;float: left;margin-top: 20px;">&ndash;&gt;-->
<!--&lt;!&ndash;        <p style="height: 40px;line-height: 40px;margin-bottom: 15px;text-align: center" v-show="area3">CPU</p>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--&lt;!&ndash;      <div id="gpu_container" style="height: 200px;width: 45%;float: left;margin-top: 20px;margin-left: 10px;" v-show="area4">&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;        GPU占用率(%)&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;        <el-tabs v-model="activeGpu">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-tab-pane label="GPU1" name="first">&ndash;&gt;-->
<!--&lt;!&ndash;            <div id="gpu1_container" style="height: 200px;width: 100%;"></div>&ndash;&gt;-->
<!--&lt;!&ndash;          </el-tab-pane>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-tab-pane label="GPU2" name="second">&ndash;&gt;-->
<!--&lt;!&ndash;            <div id="gpu2_container" style="height: 200px;width: 100%;"></div>&ndash;&gt;-->
<!--&lt;!&ndash;          </el-tab-pane>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-tab-pane label="GPU3" name="third">&ndash;&gt;-->
<!--&lt;!&ndash;            <div id="gpu3_container" style="height: 200px;width: 100%;"></div>&ndash;&gt;-->
<!--&lt;!&ndash;          </el-tab-pane>&ndash;&gt;-->
<!--&lt;!&ndash;          <el-tab-pane label="GPU4" name="fourth">&ndash;&gt;-->
<!--&lt;!&ndash;            <div id="gpu4_container" style="height: 200px;width: 100%;"></div>&ndash;&gt;-->
<!--&lt;!&ndash;          </el-tab-pane>&ndash;&gt;-->
<!--&lt;!&ndash;        </el-tabs>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--    </div>-->
    <div class="outer" v-show="activeName==='first'">
      <div id="disk_container" style="height: 200px;width: 45%;float: left;">
        <p style="text-align: center" v-show="area1">磁盘</p>
      </div>
      <div id="memory_container" style="height: 200px;width: 45%;float: left;margin-left: 10px">
        <p style="text-align: center" v-show="area2">内存</p>
      </div>
      <div id="totalCpu_container" style="height: 200px;width: 45%;float: left;margin-top: 20px;">
        <p style="height: 40px;line-height: 40px;margin-bottom: 15px;text-align: center" v-show="area3">CPU</p>
      </div>

      <div id="gpu_container" style="height: 200px;width: 45%;float: left;margin-top: 20px;margin-left: 10px;" v-show="area4">
        <!--        GPU占用率(%)-->
        <el-tabs v-model="activeGpu">
          <el-tab-pane label="GPU1" name="first">
            <div id="gpu1_container" style="height: 200px;width: 100%;"></div>
          </el-tab-pane>
          <el-tab-pane label="GPU2" name="second">
            <div id="gpu2_container" style="height: 200px;width: 100%;"></div>
          </el-tab-pane>
          <el-tab-pane label="GPU3" name="third">
            <div id="gpu3_container" style="height: 200px;width: 100%;"></div>
          </el-tab-pane>
          <el-tab-pane label="GPU4" name="fourth">
            <div id="gpu4_container" style="height: 200px;width: 100%;"></div>
          </el-tab-pane>
        </el-tabs>
      </div>

    </div>
<!--    h 440 w 95%
   4:3版本 66vh 88vh
-->
    <div class="outer" v-show="activeName==='second'">
      <div id="disk_container_one" style="height: 66vh;width: 88vh;margin: 0 auto">
        <h3 class="title2">硬盘使用量(MB)</h3>
      </div>
    </div>
    <div class="outer" v-show="activeName==='third'">
      <div id="memory_container_one" style="height: 66vh;width: 88vh;margin: 0 auto">
        <h3 class="title2">内存使用量(MB)</h3>
      </div>
    </div>
    <div class="outer" v-show="activeName==='fourth'">
      <div id="gpu1_container_one" style="height: 66vh;width: 88vh;margin: 0 auto">
        <h3 class="title2">GPU1占用率(%)</h3>
      </div>
    </div>
    <div class="outer" v-show="activeName==='seventh'">
      <div id="gpu2_container_one" style="height: 66vh;width: 88vh;margin: 0 auto">
        <h3 class="title2">GPU2占用率(%)</h3>
      </div>
    </div>
    <div class="outer" v-show="activeName==='eighth'">
      <div id="gpu3_container_one" style="height: 66vh;width: 88vh;margin: 0 auto">
        <h3 class="title2">GPU3占用率(%)</h3>
      </div>
    </div>
    <div class="outer" v-show="activeName==='ninth'">
      <div id="gpu4_container_one" style="height: 66vh;width: 88vh;margin: 0 auto">
        <h3 class="title2">GPU4占用率(%)</h3>
      </div>
    </div>
    <div class="outer" v-show="activeName==='fifth'">
      <div id="cpu_container_one" style="height: 66vh;width: 88vh;margin: 0 auto">
        <h3 class="title2">CPU整体占用率(%)</h3>
      </div>
    </div>
    <div class="outer" v-show="activeName==='sixth'">
      <div id="perCpu_container_one" style="height: 500px;width: 95%;float: left;">
        <h3 class="title2">CPU多核心占用率(%)                  当前服务器CPU核心数:{{per_cpu_array.length}}</h3>
<!--        循环生成tab标签 因为cpu核数不定-->
        <el-tabs v-model="per_cpu_name">
<!--          <el-tab-pane :name="index+''" :label="((index - 1) * tabNum + 1) + '-' + (index) * tabNum" v-for="index in per_cpu_array.length/tabNum" :key=index></el-tab-pane>-->
<!--          增加一个总览-->
          <el-tab-pane name="all" label="总览"></el-tab-pane>
        </el-tabs>
<!--        为每个tab页循环生成多个div-->
        <div class="multi" v-for="index in per_cpu_array.length/tabNum">
          <div v-show="per_cpu_name===index+''" style="height: 250px;width: 24%;float: left;margin-top: 20px;margin-left: 10px" v-for="num in tabNum" :id="'cpu'+((index - 1) * tabNum + num)">
<!--            <el-input :disabled="true" :placeholder="(index - 1) * tabNum + num"></el-input>-->
          </div>
        </div>
<!--        为perCpu设置总览div-->
        <div v-show="per_cpu_name==='all'" v-for="index in per_cpu_array.length" style="height: 250px;width: 23%;float: left;margin-top: 20px;margin-left: 10px" :id="'all'+index">
<!--          <el-input :disabled="true" :placeholder="index"></el-input>-->
        </div>
      </div>
    </div>
    <el-dialog
        title="导出信息填写"
        :visible.sync="exportVisible"
        width="30%"
        :show-close="false"
        :close-on-click-modal="false">

      <el-form ref="form" :model="exportForm" label-width="80px" :rules="exportRules">
        <el-form-item label="文件名" prop="name">
          <el-input v-model="exportForm.name"></el-input>
        </el-form-item>
        <el-form-item label="高度" prop="height">
          <el-input v-model="exportForm.height"></el-input>
        </el-form-item>
        <el-form-item label="宽度" prop="width">
          <el-input v-model="exportForm.width"></el-input>
        </el-form-item>
      </el-form>
<!--      <span style="color: red">*高度建议不超过500，宽度不超过1000</span>-->
      <span style="color: red" v-show="this.activeName ==='second'">{{secondWH}}</span>
      <span style="color: red" v-show="this.activeName ==='first'">{{firstWH}}</span>
      <span style="color: red" v-show="this.activeName ==='third'">{{thirdWH}}</span>
      <span style="color: red" v-show="this.activeName ==='fifth'">{{fifthWH}}</span>
      <span style="color: red" v-show="this.activeName ==='fourth'">{{fourthWH}}</span>
      <span style="color: red" v-show="this.activeName ==='sixth'">{{sixthWH}}</span>
<!--      <span></span>-->
      <span slot="footer" class="dialog-footer">
    <el-button @click="exportVisible = false">取 消</el-button>
        <el-button type="primary" @click="exportWord(exportForm.height,exportForm.width,'graph',exportForm.name),exportVisible = false" v-if="!area1" disabled>确 定</el-button>
        <el-button type="primary" @click="exportWord(exportForm.height,exportForm.width,'graph',exportForm.name),exportVisible = false" v-if="area1 && this.activeName==='first'">确 定</el-button>
        <el-button type="primary" @click="exportWord(exportForm.height,exportForm.width,'graphRam_test',exportForm.name),exportVisible = false" v-if="area11 && this.activeName ==='second'">确 定</el-button>
        <el-button type="primary" @click="exportWord(exportForm.height,exportForm.width,'graphMem_test',exportForm.name),exportVisible = false" v-if="area22 && this.activeName ==='third'">确 定</el-button>
        <el-button type="primary" @click="exportWord(exportForm.height,exportForm.width,'graphCpu_test',exportForm.name),exportVisible = false" v-if="area33 && this.activeName ==='fifth'">确 定</el-button>
        <el-button type="primary" @click="exportWord(exportForm.height,exportForm.width,'graphGpu_test',exportForm.name),exportVisible = false" v-if="area44 && this.activeName ==='fourth'">确 定</el-button>
        <el-button type="primary" @click="exportWord2(exportForm.height,exportForm.width,'cpuGraph_test',exportForm.name),exportVisible = false" v-if="this.activeName==='sixth'">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import {getWH} from "../components/getWH";
import moment from "moment";
import ip from "@/components/ip";
import {Line, Pie} from '@antv/g2plot';
import {toDataURL} from "@/components/exportFunction";
import JSZipUtils from "jszip-utils";
import PizZip from "pizzip";
import docxtemplater from "docxtemplater";
import {exportMixin} from "@/components/mixin";
import {
  historyAllData,
  historyCpuData,
  historyGpuData,
  historyPerCpuData,
  historyRamData,
  historyRomData
} from "@/api/server";
export default {
  name: "uploadPageCloud",
  mixins :[exportMixin],
  data() {
    return {
      firstWH:'',
      secondWH:'',
      thirdWH:'',
      fourthWH:'',
      fifthWH:'',
      sixthWH:'',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近1小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近3小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 3);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近12小时',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 12);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近1天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [start, end]);
            }
          },
          {
          text: '最近7天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        },
          {
            text: '最近30天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, ]
      },
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: '',
      value3:'',
      serverOptions:[{
        value:'0',
        label:'服务器1'
      },
        {
          value:'1',
          label:'服务器2'
        }],
      // 改一下value 改成输入 只能输入1-60
      graphData: [],
      st:'',
      et:'',
      interval_base:null,
      interval_cpu:null,
      interval:null,
      interval_col:null,
      area1:null,
      area11:null,
      area2:null,
      area22:null,
      area3:null,
      area33:null,
      area4:null,
      area44:null,
      Area: {
        area1:null,
        area11:null,
        area2:null,
        area22:null,
        area3:null,
        area33:null,
        area4:null,
        area44:null,
      },
      cpuArea : {},
      area5:null,
      // 这两个数组通过代码生成128个键值对 如area_cpu1,area_all_cpu1
      area_cpu:[],
      area_all_cpu:[],
      //控制除了多核cpu的图表
      isGraph:0,
      //控制多核cpu的图表,只在第一次切到这个tab时画图，接下来不再画图
      isCpuGraph:0,
      //其他四个指标折线图的控制
      isRamGraph:0,
      isRomGraph:0,
      isGpuGraph:0,
      isTotalCpuGraph:0,
      diskDataArray:[],
      memoryDataArray:[],
      gpuDataArray:[],
      totalCpuDataArray:[],
      perCpuDataArray0:[],
      allGraphData: null,
      activeName: 'first',
      activeGpu:'first',
      per_cpu_name:'all',
      per_cpu_array:[],
      tabNum:8,
      value4:'',
      loading:false,
      ramPieData:[],
      romPieData:[],
      cpuPieData:[],
      gpuPieData:[],
      interval_ram:null,
      interval_rom:null,
      interval_gpu:null,
      interval_tcpu:null,
      six : 0
    }
  },
  created() {

      // this.$nextTick(()=>{
      //   this.initChart()
      // })
    // axios.get(ip + '/perf/time?start_time=2022-12-10 19:18:48&end_time=2022-12-10 20:18:48&space=1').then(res=>{
    //   this.per_cpu_array = res.data[0].cpu_percent
    // })
  },
  beforeDestroy() {
    clearInterval(this.interval_base)
    clearInterval(this.interval_cpu)
    clearInterval(this.interval_gpu)
    clearInterval(this.interval_tcpu)
    clearInterval(this.interval_rom)
    clearInterval(this.interval_ram)
    this.interval_base = null
    this.interval_cpu = null
    this.interval_ram= null
    this.interval_rom= null
    this.interval_tcpu= null
    this.interval_gpu= null
  },
  methods: {
    wi() {
      console.log(this.area1);
      console.log(document.getElementById("disk_container_one").clientWidth);
      console.log(document.getElementById("disk_container_one").clientHeight);
    },
    tttt() {
      console.log('huiangwei',moment(this.value3[0]).format())
    },
    cpuEvent(tab, event){
      console.log(tab.name);
      //cpu多核数据事件  点击到此tab时开始获取数据和画图  isCpuGraph控制其画图次数
      if (tab.name==='sixth' && this.isCpuGraph===0) {
          this.isCpuGraph=1
          this.generateMultiCpuGraph()
      }
    },
    // 封装antv的图表导出
    toDataURL(chart) {
      const canvas = chart.getCanvas();
      const renderer = chart.renderer;
      const canvasDom = canvas.get('el');
      let dataURL = '';
      if (renderer === 'svg') {
        const clone = canvasDom.cloneNode(true);
        const svgDocType = document.implementation.createDocumentType(
            'svg',
            '-//W3C//DTD SVG 1.1//EN',
            'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'
        );
        const svgDoc = document.implementation.createDocument('http://www.w3.org/2000/svg', 'svg', svgDocType);
        svgDoc.replaceChild(clone, svgDoc.documentElement);
        const svgData = new XMLSerializer().serializeToString(svgDoc);
        dataURL = 'data:image/svg+xml;charset=utf8,' + encodeURIComponent(svgData);
      } else if (renderer === 'canvas') {
        dataURL = canvasDom.toDataURL('image/png');
      }
      return dataURL;
    },
    testout() {
      console.log(this.toDataURL(this.area1.chart));
    },
    dc(){
      if (this.value2===''){
        this.$message({
          message: '未正确选择时间',
          type: 'warning'
        });
      }
      else if (this.value3===''){
        this.$message({
          message: '未正确选择周期',
          type: 'warning'
        });
      }
      else {
        // this.st = moment(this.value2[0]).format('YYYY-MM-DD HH:mm:ss')
        // this.et = moment(this.value2[1]).format('YYYY-MM-DD HH:mm:ss')
        this.st = moment(this.value2[0]).format('YYYY-MM-DD HH:mm:ss')
        this.et = moment(this.value2[1]).format('YYYY-MM-DD HH:mm:ss')
        this.six = 1
        this.loading = true
        this.activeName='first'
        this.getGpuData()
        this.getCpuData()
        this.getRomData()
        this.getRamData()
        this.getPerCpuData()
        this.getPieData()

      }

    },
    // 重复发送请求出图时，销毁之前的
    baseAreaDestory(){
      this.area1.destroy()
      this.area2.destroy()
      this.area3.destroy()
      this.area4.destroy()
      if (this.area11) {
        this.area11.destroy()
      }
      if (this.area22) {
        this.area22.destroy()
      }
      if (this.area33) {
        this.area33.destroy()
      }
      if (this.area44) {
        this.area44.destroy()
      }
      if (this.area_all_cpu[0].name) {
        for(let i = 0;i<this.per_cpu_array.length;i++) {
          this.area_all_cpu[i].name.destroy()
          this.area_cpu[i].name.destroy()
        }
      }

      this.diskDataArray = []
      this.memoryDataArray = []
      this.gpuDataArray = []
      this.totalCpuDataArray = []
      this.romPieData =[]
      this.ramPieData =[]
      this.cpuPieData =[]
      this.gpuPieData =[]
      this.perCpuDataArray0 =[]
      this.area_cpu =[]
      this.area_all_cpu =[]
      this.isCpuGraph = 0
    },
    //画饼图的数据对比
    getPieData() {
      if (this.isGraph === 1) {
        //显示则先摧毁
        this.baseAreaDestory()
        this.isGraph = 0
      }
      historyAllData(this.$store.state.server.serverId,this.st,this.et,this.value3).then(res=>{
      // axios.get(this.$ip2 + '/server/perf/overview?server_id='+this.$store.state.server.serverId + '&start_time=' + this.st +'&end_time=' + this.et + '&period=' + this.value3).then(res=>{
        // res.data.server_cpu_used_mean = parseFloat(res.data.server_cpu_used_mean).toFixed(2)
        // console.log(typeof res.data.server_cpu_used_mean.toFixed(2));
        this.cpuPieData.push({
          type:'已用CPU',
          // value:res.data.server_cpu_used_mean
          value:parseFloat(res.data.server_cpu_used_mean.toFixed(2))
        },
            {
              type:'剩余CPU',
              // value:100 - res.data.server_cpu_used_mean
              value:100 - parseFloat(res.data.server_cpu_used_mean.toFixed(2))
            })
        this.gpuPieData.push({
              type:'已用GPU',
              value:parseFloat(res.data.server_gpu_used_mean.toFixed(2))
            },
            {
              type:'剩余GPU',
              value:100 - parseFloat(res.data.server_gpu_used_mean.toFixed(2))
            })
        this.romPieData.push({
          type:'已用磁盘',
          value:parseFloat(res.data.server_rom_used_mean.toFixed(2))
        },
            {
              type:'剩余磁盘',
              value:parseFloat(res.data.server_rom_total) - parseFloat(res.data.server_rom_used_mean.toFixed(2))
            })
        this.ramPieData.push({
          type:'已用内存',
          value:parseFloat(res.data.server_ram_used_mean.toFixed(2))
        },
            {
              type:'剩余内存',
              value:parseFloat(res.data.server_ram_total) - parseFloat(res.data.server_ram_used_mean.toFixed(2))
            })
      })
      this.generatePie()
    },
    //#region
    getBaseData() {
      //目前是否已显示图表处理
      if (this.isGraph === 1) {
      //显示则先摧毁
        this.baseAreaDestory()
        this.isGraph = 0
      }
      axios.get(ip + '/perf/time?start_time=' + this.st +'&end_time=' + this.et + '&space=' + this.value3).then(res =>{
        // console.log(res.data[0].cpu_percent)
        this.per_cpu_array = res.data[0].cpu_percent
        // console.log(this.getCurrentTime());
        //创建两个cpu多核数组,用于开图
        for (let j =0;j<this.per_cpu_array.length;j++){
          this.area_all_cpu.push({
            name: null
          })
          this.area_cpu.push({
            name: null
          })
          //为数据留空
          this.perCpuDataArray0.push([])
        }
        //手动添加横坐标逻辑：判断时间间隔，间隔太大，则手动添加null
        for (let i=0;i<res.data.length;i++)
        {
          // if (i===0) {
          //   // 如果初始时间没有 则手动添加
          //   if (moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')!==moment(this.st).format('YYYY-MM-DD HH:mm:ss')){
          //     this.totalCpuDataArray.push({
          //       timePeriod: moment(this.st).format('YYYY-MM-DD HH:mm'),
          //       value: null
          //     })
          //   }
          // }
          // if (i===res.data.length/2 -2) {
          //   this.totalCpuDataArray.push({
          //     timePeriod: '2022-12-10至2022-12-15',
          //     value: null
          //   })
          // }
          // if (i===res.data.length/2 + 4) {
          //   this.totalCpuDataArray.push({
          //     timePeriod: '2022-12-17至2011-12-28',
          //     value: null
          //   })
          // }
          this.diskDataArray.push({
            timePeriod: moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss'),
            value: res.data[i].server_disk_used
          })
          this.memoryDataArray.push({
            timePeriod: moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss'),
            value: res.data[i].server_memory_used
          })
          this.totalCpuDataArray.push({
            timePeriod: moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss'),
            value: res.data[i].server_cpu_total_used
          })
          this.gpuDataArray.push({
            timePeriod: moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss'),
            value: res.data[i].server_gpu_used
          })
          for (let j = 0;j<this.per_cpu_array.length;j++){
            this.perCpuDataArray0[j].push({
              timePeriod: moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss'),
              value: res.data[i].cpu_percent[j]
            })
          }
          // if (i===res.data.length - 1){
          //   //如果最后选择的时间没有数据，则手动添加
          //   if (moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')!==moment(this.et).format('YYYY-MM-DD HH:mm:ss')){
          //     this.totalCpuDataArray.push({
          //       timePeriod: moment(this.et).format('YYYY-MM-DD HH:mm'),
          //       value: null
          //     })
          //    }
          //  }
        }
        this.generateBaseGraph()
        // this.generateMultiCpuGraph()
      })
    },
    //endregion
    getGpuData() {
      historyGpuData(this.$store.state.server.serverId,this.st,this.et,this.value3).then(res=>{
      // axios.get(this.$ip2 + '/server/perf/gputime?server_id='+this.$store.state.server.serverId+'&start_time=' + this.st +'&end_time=' + this.et + '&period=' + this.value3).then(res =>{
        for (let i=0;i<res.data.length;i++)
        {
          if (i===0) {
            // 如果初始时间没有 则手动添加
            if (moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')!==moment(this.st).format('YYYY-MM-DD HH:mm:ss')){
              this.gpuDataArray.push({
                timePeriod: moment(this.st).format('YYYY-MM-DD HH:mm'),
                value: null
              })
            }
          }
          this.gpuDataArray.push({
            timePeriod: moment(res.data[i][0]).format('YYYY-MM-DD HH:mm'),
            value: +res.data[i][1]
          })
          if (i===res.data.length - 1){
            //如果最后选择的时间没有数据，则手动添加
            if (moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')!==moment(this.et).format('YYYY-MM-DD HH:mm:ss')){
              this.gpuDataArray.push({
                timePeriod: moment(this.et).format('YYYY-MM-DD HH:mm'),
                value: null
              })
             }
           }
        }
        this.generateGpuLine()
      })

    },
    getCpuData(){
      historyCpuData(this.$store.state.server.serverId,this.st,this.et,this.value3).then(res=>{
      // axios.get(this.$ip2 + '/server/perf/cputime?server_id='+this.$store.state.server.serverId+'&start_time=' + this.st +'&end_time=' + this.et + '&period=' + this.value3).then(res =>{
        for (let i=0;i<res.data.length;i++)
        {
          if (i===0) {
            // 如果初始时间没有 则手动添加
            if (moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')!==moment(this.st).format('YYYY-MM-DD HH:mm:ss')){
              this.totalCpuDataArray.push({
                timePeriod: moment(this.st).format('YYYY-MM-DD HH:mm'),
                value: null
              })
            }
          }
          this.totalCpuDataArray.push({
            timePeriod: moment(res.data[i][0]).format('YYYY-MM-DD HH:mm'),
            value: +res.data[i][1]
          })
          if (i===res.data.length - 1){
            //如果最后选择的时间没有数据，则手动添加
            if (moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')!==moment(this.et).format('YYYY-MM-DD HH:mm:ss')){
              this.totalCpuDataArray.push({
                timePeriod: moment(this.et).format('YYYY-MM-DD HH:mm'),
                value: null
              })
            }
          }
        }
        this.generateCpuLine()
      })

    },
    getRomData(){
      historyRomData(this.$store.state.server.serverId,this.st,this.et,this.value3).then(res=>{
      // axios.get(this.$ip2 + '/server/perf/romtime?server_id='+this.$store.state.server.serverId+'&start_time=' + this.st +'&end_time=' + this.et + '&period=' + this.value3).then(res =>{
        for (let i=0;i<res.data.length;i++)
        {
          if (i===0) {
            // 如果初始时间没有 则手动添加
            if (moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')!==moment(this.st).format('YYYY-MM-DD HH:mm:ss')){
              this.diskDataArray.push({
                timePeriod: moment(this.st).format('YYYY-MM-DD HH:mm'),
                value: null
              })
            }
          }
          this.diskDataArray.push({
            timePeriod: moment(res.data[i][0]).format('YYYY-MM-DD HH:mm'),
            value: +res.data[i][1]
          })
          if (i===res.data.length - 1){
            //如果最后选择的时间没有数据，则手动添加
            if (moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')!==moment(this.et).format('YYYY-MM-DD HH:mm:ss')){
              this.diskDataArray.push({
                timePeriod: moment(this.et).format('YYYY-MM-DD HH:mm'),
                value: null
              })
            }
          }
        }
        this.generateRomLine()
      })

    },
    getRamData(){
      historyRamData(this.$store.state.server.serverId,this.st,this.et,this.value3).then(res=>{
      // axios.get(this.$ip2 + '/server/perf/ramtime?server_id='+this.$store.state.server.serverId+'&start_time=' + this.st +'&end_time=' + this.et + '&period=' + this.value3).then(res =>{
        for (let i=0;i<res.data.length;i++)
        {
          if (i===0) {
            // 如果初始时间没有 则手动添加
            if (moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')!==moment(this.st).format('YYYY-MM-DD HH:mm:ss')){
              this.memoryDataArray.push({
                timePeriod: moment(this.st).format('YYYY-MM-DD HH:mm'),
                value: null
              })
            }
          }
          this.memoryDataArray.push({
            timePeriod: moment(res.data[i][0]).format('YYYY-MM-DD HH:mm'),
            value: +res.data[i][1]
          })
          if (i===res.data.length - 1){
            //如果最后选择的时间没有数据，则手动添加
            if (moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')!==moment(this.et).format('YYYY-MM-DD HH:mm:ss')){
              this.memoryDataArray.push({
                timePeriod: moment(this.et).format('YYYY-MM-DD HH:mm'),
                value: null
              })
            }
          }
        }
        this.generateRamLine()
      })

    },
    getPerCpuData(){
      historyPerCpuData(this.$store.state.server.serverId,this.st,this.et,this.value3).then(res=>{
      // axios.get(this.$ip2 + '/server/perf/percputime?server_id='+this.$store.state.server.serverId+'&start_time=' + this.st +'&end_time=' + this.et + '&period=' + this.value3).then(res =>{
        console.log('???',res);
        this.six = 2
        this.per_cpu_array = res.data[0].cpu_used
        for (let j =0;j<this.per_cpu_array.length;j++){
          this.area_all_cpu.push({
            name: null
          })
          this.area_cpu.push({
            name: null
          })
          //为数据留空
          this.perCpuDataArray0.push([])
        }
        for (let i=0;i<res.data.length;i++)
        {
          for (let j = 0;j<this.per_cpu_array.length;j++){
            if (i===0) {
              // 如果初始时间没有 则手动添加
              if (moment(res.data[i].time).format('YYYY-MM-DD HH:mm')!==moment(this.st).format('YYYY-MM-DD HH:mm')){
                this.perCpuDataArray0[j].push({
                  timePeriod: moment(this.st).format('YYYY-MM-DD HH:mm'),
                  value: null
                })
              }
            }
            this.perCpuDataArray0[j].push({
              timePeriod: moment(res.data[i].time).format('YYYY-MM-DD HH:mm'),
              value: res.data[i].cpu_used[j]
            })
            if (i===res.data.length - 1) {
              // 如果结束时间没有 则手动添加
              if (moment(res.data[i].time).format('YYYY-MM-DD HH:mm:ss')!==moment(this.et).format('YYYY-MM-DD HH:mm')){
                this.perCpuDataArray0[j].push({
                  timePeriod: moment(this.et).format('YYYY-MM-DD HH:mm'),
                  value: null
                })
              }
            }
          }
        }
      })
    },
    generatePie() {
      this.area1 = new Pie('disk_container', {
        appendPadding: 10,
        data:this.romPieData,
        angleField: 'value',
        colorField: 'type',
        radius: 0.8,
        label: {
          type: 'outer',
          // offset: '10%',
          // content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
          content:'{value}-{percentage}',
          style: {
            fontSize: 14,
            textAlign: 'center',
            fill:'#000000'
          },
        },
        interactions: [{ type: 'element-active' }],
      });
      this.area2 = new Pie('memory_container', {
        appendPadding: 10,
        data:this.ramPieData,
        angleField: 'value',
        colorField: 'type',
        radius: 0.8,
        color:['#52658F', '#D9B310'],
        label: {
          type: 'outer',
          offset: '-30%',
          content:'{value}-{percentage}',
          style: {
            fontSize: 14,
            textAlign: 'center',
            fill:'#000000'
          },
        },
        interactions: [{ type: 'element-active' }],
      });
      this.area3 = new Pie('totalCpu_container', {
        appendPadding: 10,
        data:this.cpuPieData,
        angleField: 'value',
        colorField: 'type',
        radius: 0.8,
        color:['#E8E8E8', '#328CC1'],
        label: {
          type: 'outer',
          offset: '-30%',
          content:'{percentage}',
          style: {
            fontSize: 14,
            textAlign: 'center',
            fill:'#000000'
          },
        },
        interactions: [{ type: 'element-active' }],
      });
      this.area4 = new Pie('gpu1_container', {
        appendPadding: 10,
        data:this.gpuPieData,
        angleField: 'value',
        colorField: 'type',
        radius: 0.8,
        color:[ '#F7F2E6','#0B3C5B'],
        label: {
          type: 'outer',
          offset: '-30%',
          content:'{percentage}',
          style: {
            fontSize: 14,
            textAlign: 'center',
            fill:'#000000'
          },
        },
        interactions: [{ type: 'element-active' }],
      });
      this.area1.render();
      this.area2.render();
      this.area3.render();
      this.area4.render();
      this.baseDataChange()
    },
    generateRomLine() {
      this.area11 = new Line('disk_container_one', {
        data: this.diskDataArray,
        xField: 'timePeriod',
        yField: 'value',
        // point: {
        //   size: 2,
        //   shape: 'custom-point',
        //   style: {
        //     fill: 'white',
        //     stroke: '#5B8FF9',
        //     lineWidth: 2,
        //   },
        // },
        // label:{
        //   visible:true,
        //   offsetX: 6,
        //   offsetY: 6,
        // },
        // yAxis:{
        //   //这是实现y轴固定的关键
        //   type:'linear',
        //   max: 1125144,
        //   min:0,
        //   tickCount:40,
        //
        // },
        xAxis: {
          range: [0, 1],
          // tickCount: 32,
          label:{
            autoRotate:false,
            //这里是弧度而不是角度
            rotate:30.4,
            offsetX:-75
          }
        },
        slider: {
          start: 0,
          end: 1,
        },

      });
      this.area11.render()
      // this.ramDataChange()
    },
    generateRamLine() {
      this.area22 = new Line('memory_container_one', {
        data: this.memoryDataArray,
        xField: 'timePeriod',
        yField: 'value',
        // yAxis:{
        //   //这是实现y轴固定的关键
        //   type:'linear',
        //   max: 257157,
        //   min:0,
        //   tickCount:40,
        // },
        // point: {
        //   size: 5,
        //   shape: 'custom-point',
        //   style: {
        //     fill: 'white',
        //     stroke: '#5B8FF9',
        //     lineWidth: 2,
        //   },
        // },
        // label:{
        //   visible:true,
        // },
        xAxis: {
          range: [0, 1],
          // tickCount: 5,
          label:{
            autoRotate:false,
            //这里是弧度而不是角度
            rotate:30.4,
            offsetX:-75
          }
        },
        slider: {
          start: 0,
          end: 1,
        },
      });
      this.area22.render()
      // this.romDataChange()
    },
    generateCpuLine() {
      this.area33 = new Line('cpu_container_one', {
        data: this.totalCpuDataArray,
        xField: 'timePeriod',
        yField: 'value',
        // yAxis:{
        //   //这是实现y轴固定的关键
        //   type:'linear',
        //   max: 100,
        //   min:0,
        //   tickCount:6,
        // },
        // point: {
        //   size: 5,
        //   shape: 'custom-point',
        //   style: {
        //     fill: 'white',
        //     stroke: '#5B8FF9',
        //     lineWidth: 2,
        //   },
        // },
        // label:{
        //   visible:true,
        //   offsetX: 6,
        //   offsetY: 6,
        // },
        xAxis: {
          range: [0, 1],
          // tickCount: 5,
          label:{
            autoRotate:false,
            //这里是弧度而不是角度
            rotate:30.4,
            offsetX:-75
          }
        },
        slider: {
          start: 0,
          end: 1,
        },
      });
      this.area33.render()
      // this.cpuDataChange()
    },
    generateGpuLine() {
      this.area44 = new Line('gpu1_container_one', {
        data: this.gpuDataArray,
        xField: 'timePeriod',
        yField: 'value',
        // yAxis:{
        //   //这是实现y轴固定的关键
        //   type:'linear',
        //   max: 100,
        //   min:0,
        //   tickCount:6,
        // },
        // label:{
        //   visible:true,
        // },
        // point: {
        //   size: 5,
        //   shape: 'custom-point',
        //   style: {
        //     fill: 'white',
        //     stroke: '#5B8FF9',
        //     lineWidth: 2,
        //   },
        // },
        xAxis: {
          range: [0, 1],
          // tickCount: 5,
          label:{
            autoRotate:false,
            //这里是弧度而不是角度
            rotate:30.4,
            offsetX:-72
          }
        },
        slider: {
          start: 0,
          end: 1,
        },
      });
      this.area44.render()
      // this.gpuDataChange()
    },
    //生成多核cpu的图
    generateMultiCpuGraph() {
      console.log('看',this.area_all_cpu);
      for (let i =1;i<this.per_cpu_array.length + 1;i++){
        this.area_all_cpu[i -1].name = new Line('all'+i,{
          data: this.perCpuDataArray0[i - 1],
          xField: 'timePeriod',
          yField: 'value',
          xAxis: {
            // range: [0, 1],
            tickCount:10,
            label:{
              autoRotate:false,
              //这里是弧度而不是角度
              rotate:30.4,
              offsetX:-75
            }
          },
          yAxis: {
            title:{
              text:'cpu' + i,
              autoRotate:false,
              position:'end',
              style:{
                fill:'red'
              }
            }
          }
        })
        // this.area_cpu[i -1].name = new Line('cpu'+i,{
        //   data: this.perCpuDataArray0[i - 1],
        //   xField: 'timePeriod',
        //   yField: 'value',
        //   xAxis: {
        //     range: [0, 1],
        //     label:{
        //       autoRotate:false,
        //       //这里是弧度而不是角度
        //       rotate:30.4,
        //       offsetX:-75
        //     }
        //   },
        //   yAxis: {
        //     title:{
        //       text:'cpu' + i,
        //       autoRotate:false,
        //       position:'end',
        //       style:{
        //         fill:'red'
        //       }
        //     }
        //   }
        // })
        this.area_all_cpu[i -1].name.render()
        // this.area_cpu[i -1].name.render()

      }
      // this.multiCpuDataChange()
    },
    baseDataChange() {
      this.interval_base = setInterval(() => {
        this.area1.changeData(this.romPieData);
        // this.area11.changeData(this.diskDataArray);
        this.area2.changeData(this.ramPieData);
        // this.area22.changeData(this.memoryDataArray);
        this.area3.changeData(this.cpuPieData);
        // this.area33.changeData(this.totalCpuDataArray);
        this.area4.changeData(this.gpuPieData);
        // this.area44.changeData(this.gpuDataArray);
        // for (let i =0;i<this.per_cpu_array.length;i++){
        //   this.area_all_cpu[i].name.changeData(this.perCpuDataArray0[i])
        //   this.area_cpu[i].name.changeData(this.perCpuDataArray0[i])
        // }
        // this.area_all_cpu[0].name.changeData(this.perCpuDataArray0[0])
      }, 500);

      if (this.ramPieData.length>0) {
        clearInterval(this.interval_base)
      }
      this.isGraph=1
      this.loading=false
    },
    multiCpuDataChange() {
      this.interval_cpu = setInterval(() => {
        console.log('?')
        for (let i =0;i<this.per_cpu_array.length;i++){
          this.area_all_cpu[i].name.changeData(this.perCpuDataArray0[i])
          this.area_cpu[i].name.changeData(this.perCpuDataArray0[i])
        }
        // this.area_all_cpu[0].name.changeData(this.perCpuDataArray0[0])
      }, 500);
      if (this.perCpuDataArray0.length>0) {
        clearInterval(this.interval_cpu)
      }
      // this.isCpuGraph=1
    },
    getCurrentTime() {
      //获取当前时间并打印
      let _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth()+1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
      // _this.gettime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
      // console.log(this.gettime)
      return yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
    },
    serverInfoExport() {
      if (this.activeName === 'first') this.firstWH = getWH("disk_container")
      else if (this.activeName === 'second') this.secondWH = getWH("disk_container_one")
      else if (this.activeName === 'third') this.thirdWH = getWH("memory_container_one")
      else if (this.activeName === 'fifth') this.fifthWH = getWH("cpu_container_one")
      else if (this.activeName === 'sixth') this.sixthWH === '' ? this.sixthWH = getWH("all1") : this.sixthWH
      else this.fourthWH = getWH("gpu1_container_one")
      this.exportVisible = true
    },
    getImg() {
      if(this.area1 && this.activeName === 'first') {
        this.Area.area1 = toDataURL(this.area1.chart)
      }
      if(this.area11 && this.activeName === 'second') {
        this.Area.area11 = toDataURL(this.area11.chart)
      }

      if(this.area2 && this.activeName === 'first') {
        this.Area.area2 = toDataURL(this.area2.chart)
      }

      if(this.area22 && this.activeName === 'third') {
        this.Area.area22 = toDataURL(this.area22.chart)
      }

      if(this.area3 && this.activeName === 'first') {
        this.Area.area3 = toDataURL(this.area3.chart)
      }

      if(this.area33 && this.activeName === 'fifth') {
        this.Area.area33 = toDataURL(this.area33.chart)
      }

      if(this.area4 && this.activeName === 'first') {
        this.Area.area4 = toDataURL(this.area4.chart)
        console.log('area1',this.Area);
      }
      if(this.area44 && this.activeName === 'fourth') {
        this.Area.area44 = toDataURL(this.area44.chart)
      }
      if (this.activeName === 'sixth') {
        for (let i = 0; i < this.area_all_cpu.length; i++) {
          this.cpuArea[['area' +i]] = toDataURL(this.area_all_cpu[i].name.chart)
        }
        // this.cpuArea['area0'] = toDataURL(this.area_all_cpu[0].name.chart)

        console.log('cpuArea',this.cpuArea);
      }

    },
    // Echarts图片处理
    base64DataURLToArrayBuffer(dataURL) {
      const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
      if (!base64Regex.test(dataURL)) {
        return false;
      }
      const stringBase64 = dataURL.replace(base64Regex, "");
      let binaryString;
      if (typeof window !== "undefined") {
        binaryString = window.atob(stringBase64);
      } else {
        binaryString = new Buffer(stringBase64, "base64").toString("binary");
      }
      const len = binaryString.length;
      const bytes = new Uint8Array(len);
      for (let i = 0; i < len; i++) {
        const ascii = binaryString.charCodeAt(i);
        bytes[i] = ascii;
      }
      return bytes.buffer;
    },
    //导出为word
    exportWord(height,width,module,name) {
      this.getImg();
      //这里要引入处理图片的插件，下载docxtemplater后，引入的就在其中了
      const ImageModule = require('docxtemplater-image-module-free');
      const _this = this;
      //Word路径，在public文件下(CLI3)
      JSZipUtils.getBinaryContent(`${module}.docx`, function (error, content) {
        if (error) {
          throw error
        }
        let opts = {}
        opts.centered = true;
        opts.fileType = "docx";
        opts.getImage = (tag) => {
          return _this.base64DataURLToArrayBuffer(tag);
        }
        opts.getSize = () => {
          return [width, height]//这里可更改输出的图片宽和高
        }

        let zip = new PizZip(content);
        let doc = new docxtemplater();
        doc.attachModule(new ImageModule(opts));
        doc.loadZip(zip);
        // 这里是设置导出的数据
        doc.setData({
          Area : _this.Area
          // arr: _this.arr // 评语
        })
        try {
          doc.render()
        } catch (error) {
          var e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties,
          }
          console.log(JSON.stringify({
            error: e
          }));
          throw error;
        }
        const out = doc.getZip().generate({
          type: "blob",
          mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        })
        saveAs(out, `${name}.docx`)
      })
    },
    exportWord2(height,width,module,name) {
      this.getImg();
      //这里要引入处理图片的插件，下载docxtemplater后，引入的就在其中了
      const ImageModule = require('docxtemplater-image-module-free');
      const _this = this;
      //Word路径，在public文件下(CLI3)
      JSZipUtils.getBinaryContent(`${module}.docx`, function (error, content) {
        if (error) {
          throw error
        }
        let opts = {}
        opts.centered = true;
        opts.fileType = "docx";
        opts.getImage = (tag) => {
          return _this.base64DataURLToArrayBuffer(tag);
        }
        opts.getSize = () => {
          return [width, height]//这里可更改输出的图片宽和高
        }

        let zip = new PizZip(content);
        let doc = new docxtemplater();
        doc.attachModule(new ImageModule(opts));
        doc.loadZip(zip);
        // 这里是设置导出的数据
        doc.setData({
          cpuArea : _this.cpuArea
          // arr: _this.arr // 评语
        })
        try {
          doc.render()
        } catch (error) {
          var e = {
            message: error.message,
            name: error.name,
            stack: error.stack,
            properties: error.properties,
          }
          console.log(JSON.stringify({
            error: e
          }));
          throw error;
        }
        const out = doc.getZip().generate({
          type: "blob",
          mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
        })
        saveAs(out, `${name}.docx`)
      })
    },
  }
}

</script>

<style scoped>
.card {
  position: relative;
  width: 900px;
  max-width: 100%;
  padding: 60px 35px 0;
  margin: 15px auto;
  overflow: hidden;
}
.title2 {
  font-size: 20px;
  margin: 5px auto 10px auto;
  text-align: center;
  font-weight: bold;
}
.block{
  margin-left: 10px;
  /*text-align: right;*/
}
/*.el-input{*/
/*  width: 60px;*/
/*}*/
/*#all4{*/
/*  border: 1px solid blue;*/
/*}*/

</style>
